<header style="border-bottom:5px solid #C20C0C;">
  <div class="my-container">
    <div class="m-auto my-padding">
      <a href="#">
        <img src="/index/img/wangyi.jpg" alt="" class="my-img0">
        <span>网易云音乐</span>
      </a>
      <ul>
        <li><a href="/#" class="active2">发现音乐</a></li>
        <li><a href="/#">我的音乐</a></li>
        <li><a href="/#">朋友</a></li>
        <!--新窗口打开可打开多个并且禁止后退-->
        <li><a href="/store/product" target="_blank">商城</a></li>
        <li><a href="/nmusician/web/index" target="_blank">音乐人</a></li>
        <li><a href="/#">下载客户端</a></li>
      </ul>

      <div class="" style="background:white;">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="音乐/视频/电台/客户">
      </div>

      <div>视频投稿</div>



      <div class="my-login" style="padding-bottom:10px;">
        <b><a href="javascript:" style="font-size:13px;" class="goto-login">登录<i
              class="iconfont icon-sanjiao"></i></a></b>
        <div class="my-hidden my-after-login">
          <ul>
            <li><a href="/#"><i class="pr-2 iconfont icon-tel"></i>手机号登录</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-weixin"></i>微信登录</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-qq"></i>QQ登录</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-weibo"></i>新浪微博登录</a></li>
          </ul>
        </div>

      </div>



      <!--div>
        <div class="my-exit">
          <img src="../img/header01/people.jpg" alt="HTML5">
        </div>
        
        <div class="my-hidden my-before-login" style="display:none">
          <ul>
            <li><a href="/#"><i class="pr-2 iconfont icon-yonghu"></i>我的主页</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-xiaoxi"></i>我的信息</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-zijinguanli"></i>我的等级</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-shangcheng"></i>VIP会员</a></li>
            <li><a href="/#"><i class="pr-2 iconfont icon-shezhi"></i>个人设置</a></li>
            <li><a href="javascript:" data-exit="exit"><i class="pr-2 icon iconfont icon-tuichu"></i>退出</a></li>
          </ul>
        </div>
      </div-->

    </div>
    <!--模态框的使用-->
  </div>
</header>


<div class="modal login" id="demo">
  <div class="modal-content">
    <div class="login">
      <div class="modal-header">
        <span>登录</span>
        <span data-change="change" class="my-times">&times;</span>
      </div>
      <div class="modal-body">
        <div>
          <img src="/index/img/platform.png" width="247" alt="HTML5">
          <button data-log="login" type="button">手机号登录</button>
          <button data-reg="register" type="button">注册</button>
        </div>
        <ul>
          <li>
            <div></div><em>微信登录</em>
          </li>
          <li>
            <div></div><em>QQ登录</em>
          </li>
          <li>
            <div></div><em>微博登录</em>
          </li>
          <li>
            <div></div><em>网易云邮箱账号登录</em>
          </li>
        </ul>
      </div>
    </div>


    <!--div class="register">
      <div class="modal-header">
        <span>手机号注册</span>
        <span data-dismiss="modal" data-change="change" class="my-times">&times;</span>
      </div>
      <div class="register-body">
        <label>手机号:</label>
        <div class="select">
          <select>
            <option>+86</option>
            <option>+852</option>
          </select>
          <input type="text" name="uname" placeholder="请输入手机号">
        </div>
        <label>密码:</label>
        <input type="password" name="upwd" placeholder="请输入密码，不得少于6位数">
        <button data-check="check">下一步</button>
      </div>
      <div class="modal-footer">
        <div><a href="javascript:">&lt;返回登录页</a></div>
      </div>
    </div-->

    <!--div class="check">
      <div class="modal-header">
        <span>手机号注册</span>
        <span data-dismiss="modal" data-change="change" class="my-times">&times;</span>
      </div>
      <div class="register-body ">
        <p class="my-p">你的手机号：<em>+86 181****8854</em></p>
        <p class="my-safe">为了安全，我们会给你发送短信验证码</p>
        <div class="inputs">
          <input maxlength="1" type="text" autofocus />
          <input maxlength="1" type="text" />
          <input maxlength="1" type="text" />
          <input maxlength="1" type="text" />
        </div>
        <div class="time">
          <span style="opacity: 1"><i class="icon iconfont icon-jinggao"></i>&nbsp;验证码输入错误</span>
          <em>60s</em>
          <a href="javascript:">重新获取</a>
        </div>
        <button data-success="success">下一步</button>
      </div>
      <div class="modal-footer">
        <div><a href="javascript:" data-toLogin="toLogin">&lt;返回登录页</a></div>
      </div>
    </div-->




  </div>
</div>

<div class="modal">
  <div class="modal-content-one">

    <div class="login-next">

      <div class="modal-header">
        <span>手机号登录</span>
        <span data-dismiss="modal" data-change="change" class="my-times">&times;</span>
      </div>
      <form method="POST" action="/api/user/github">
        <div class="register-body">
          <div class="select">
            <select style="flex:0 0 80px;">
              <option>+86</option>
              <option>+852</option>
            </select>
            <input style="flex:0 0 200px;" type="text" id="uname" name="phone" placeholder="请输入手机号">
          </div>
          <input style="" type="password" id="upwd" name="upwd" placeholder="请输入密码">

          <div class="my-check">
            <div>
              <input type="checkbox">
              <em>自动登录</em>
            </div>
            <em>忘记密码？</em>
          </div>

          <button type='submit' style="color:white;" data-login="login">登录</button>
        </div>
      </form>
      <div class="modal-footer my-a" style="line-height: 50px;background: #f7f7f7;">

        <div style="padding-left:10px;" class="float-left"><a href="javascript:">&lt;返回登录页</a></div>
        <a style="padding-right:10px;" class="float-right" href="#">没有账号？免费注册&gt;</a>

      </div>

    </div>
  </div>
</div>

<div class="modal">
  <div class="modal-content-two"></div>
</div>

<div class="modal">
  <div class="modal-content-three"></div>
</div>



<script>
  (function () {
    $('.my-login').click(function () {
      $('#demo').show()
      $('#demo>.modal-content').show()
    })
    $('[data-log="login"]').click(function () {
      $('#demo').hide()
      $('.modal:not(".login")').show()
      $('.modal-content-one').show()
    })

    $('[type="submit"]').click(function (e) {
      var phone, upwd
      phone = $('[name=phone]').val()
      upwd = $('[name=upwd]').val()
      if (!phone || !upwd) {
        alert('请输入登录信息')
        e.preventDefault()
      }
    })

  })()
</script>